import React, { useState, useEffect, useMemo } from 'react'
import { Select, Button, DatePicker, Form, Radio } from 'antd'
import { getRealtimeItems } from '&/api/electricity'
import { SearchOutlined } from '@ant-design/icons'
import moment from 'dayjs'

const Filter = ({
  onQuery,
  paramsData,
  setParamsData,
  devIds,
  chartType,
  setChartType
}) => {
  const values = JSON.parse(localStorage.getItem('user'))
  const [selectData, setSelectData] = useState([])
  const [industryNumber, setIndustryNumber] = useState(8)
  const [dateFormat, setDateFormat] = useState('YYYY-MM-DD HH:mm')
  useEffect(() => {
    getRealtimeItemsData()
  }, [])
  const minuteStep15Time = useMemo(
    () => moment().subtract(moment().minute() % 15, 'minute'),
    []
  )
  //  监测像接口
  const getRealtimeItemsData = () => {
    getRealtimeItems({ project_id: values?.project_id }).then((result) => {
      const list = result.monitor_items.filter((item) => {
        return item.data_type_id == 7 || item.data_type_id == 8
      })
      setSelectData(list)
    })
  }
  const onQueryChange = (v, t) => {
    if (t === 'time' && Array.isArray(v)) {
      onTimePresetsChange(v)
    }
    if (t === 'industry') {
      setParamsData((state) => {
        setIndustryNumber(v)
        state.data_type_id = v

        return {
          ...state
        }
      })
    }
    if (t === 'statues') {
      setParamsData((state) => {
        const newState = onTimeTypeChange(v, state)
        return {
          ...newState
        }
      })
    }
  }
  const onTimePresetsChange = (v) => {
    let latter =
      paramsData.time_type == 1
        ? ':00'
        : paramsData.time_type == 2
        ? ':00:00'
        : ' 00:00:00'
    const t = {
      start_time: moment(v[0]).format(dateFormat + latter),
      end_time: moment(v[1]).format(dateFormat + latter)
    }
    setParamsData((state) => {
      return {
        ...state,
        ...t
      }
    })
  }
  const onTimeTypeChange = (v, state) => {
    const format =
      v == 1 ? 'YYYY-MM-DD HH:mm' : v == 2 ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD'

    let latter = v == 1 ? ':00' : v == 2 ? ':00:00' : ' 00:00:00'
    setDateFormat(format)
    state.time_type = v
    if (v == 1) {
      state.start_time = moment(minuteStep15Time)
        .subtract(6, 'h')
        .format(format + latter)
    } else if (v == 2) {
      state.start_time = moment()
        .subtract(24, 'h')
        .format(format + latter)
    } else {
      state.start_time = moment()
        .subtract(30, 'd')
        .format(format + latter)
    }
    state.end_time = moment().format(format + latter)

    if (v === 1) {
      state.end_time = moment(minuteStep15Time).format(format + latter)
    }
    return state
  }

  const click = () => {
    paramsData.dev_id_list = devIds
    onQuery && onQuery(paramsData)
  }
  const radioOptions = [
    { label: '默认', value: '0' },
    { label: '周末', value: '1' },
    { label: '报警', value: '2' }
  ]
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
      <Form>
        <Form layout="inline">
          <Form.Item label="时间">
            <DatePicker.RangePicker
              showTime={dateFormat == 'YYYY-MM-DD' ? false : true}
              showNow
              minuteStep={15}
              defaultValue={[
                moment(paramsData.start_time),
                moment(paramsData.end_time)
              ]}
              value={[
                moment(paramsData.start_time),
                moment(paramsData.end_time)
              ]}
              format={dateFormat}
              presets={[
                {
                  label: '昨天',
                  value: [moment().subtract(1, 'day'), moment()]
                },
                {
                  label: '一周',
                  value: [moment().subtract(7, 'day'), moment()]
                },
                {
                  label: '一个月',
                  value: [moment().subtract(30, 'day'), moment()]
                }
              ]}
              onChange={(v) => {
                onQueryChange(v, 'time')
              }}
            />
          </Form.Item>
          <Form.Item label="监测项">
            <Select
              allowClear
              placeholder={`请选择`}
              defaultValue={paramsData.data_type_id}
              onChange={(v) => onQueryChange(v, 'industry')}
            >
              {selectData &&
                selectData.map((item) => (
                  <Select.Option
                    value={item.data_type_id}
                    key={item.data_type_id}
                  >
                    {item.data_type}
                  </Select.Option>
                ))}
            </Select>
          </Form.Item>
          <Form.Item label="时间粒度">
            {industryNumber && industryNumber === 8 ? (
              <Select
                allowClear
                placeholder={`请选择`}
                defaultValue={paramsData.time_type}
                onChange={(v) => onQueryChange(v, 'statues')}
              >
                <Select.Option value={'1'} key={'1'}>
                  刻钟
                </Select.Option>
                <Select.Option value={'2'} key={'2'}>
                  小时
                </Select.Option>
                <Select.Option value={'3'} key={'3'}>
                  日
                </Select.Option>
              </Select>
            ) : (
              <Select
                allowClear
                placeholder={`请选择`}
                defaultValue={'1'}
                onChange={(v) => onQueryChange(v, 'statues')}
              >
                <Select.Option value={'1'} key={'1'}>
                  刻钟
                </Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              onClick={click}
              icon={<SearchOutlined></SearchOutlined>}
            >
              查询
            </Button>
          </Form.Item>
        </Form>
      </Form>
      <Radio.Group
        options={radioOptions}
        onChange={(e) => setChartType(e.target.value)}
        value={chartType}
        optionType="button"
        buttonStyle="solid"
      />
    </div>
  )
}

export default Filter
